<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Image Slice</title>
</head>
<body>
    <img id="sourceImage" src="../../../../../public/img/loginBg.jpg" style="display:none;">
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
        // 加载图片
        const image = document.getElementById('sourceImage');
        image.onload = function() {
            // 获取 Canvas 元素和上下文
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');

            // 将图片绘制到 Canvas 上
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

            // 在 Canvas 上绘制矩形
            ctx.fillStyle = 'red';
            ctx.fillRect(100, 100, 200, 150); // 绘制一个 200x150 的红色矩形

            // 获取绘制区域的切片
            const imageData = ctx.getImageData(100, 100, 200, 150);
            const sliceCanvas = document.createElement('canvas');
            sliceCanvas.width = imageData.width;
            sliceCanvas.height = imageData.height;
            const sliceCtx = sliceCanvas.getContext('2d');
            sliceCtx.putImageData(imageData, 0, 0);

            // 显示切片
            // sliceCanvas.style.display = 'block';
        };
    </script>
</body>
</html>